<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>22-紫色立体UI</title>
</head>

<body>
    <div class="cont">
        <div class="UIBox">

            <!-- 第一列 -->
            <div class="leftBox">
                <!-- 第一列第一排按钮组  -->
                <div class="leftBox_a">
                    <input type="checkbox" name="chka" id="chka">
                    <label for="chka">
                        <div class="bottoms a"></div>
                    </label>
                    <input type="checkbox" name="chkb" id="chkb">
                    <label for="chkb" class="chkb">
                        <div class="bottoms b"></div>
                    </label>
                </div>
                <!-- 第一列第二排对号组 -->
                <div class="leftBox_b">
                    <input type="checkbox" name="chkb_a" id="chkb_a">
                    <label for="chkb_a">
                        <div class="bottoms a">
                            <div class="duihao"></div>
                        </div>
                    </label>
                    <input type="checkbox" name="chkb_b" id="chkb_b">
                    <label for="chkb_b" class="chk_b">
                        <div class="bottoms b">
                            <div class="duihao"></div>
                        </div>
                    </label>
                </div>
                <!-- 第一列第三排选择组 -->
                <div class="lefBox_c">
                    <input type="checkbox" name="chkc_a" id="chkc_a">
                    <label for="chkc_a" class="label_a">
                        <div class="yuanquan"></div>
                    </label>
                    <label for="chkc_a" class="label_b">
                        <div class="yuanquan"></div>
                    </label>
                </div>
                <!-- 第一列第四排选择组 -->
                <div class="leftBox_d">
                    <button class="button_a">Button</button>
                    <button class="button_b">Button</button>
                </div>
            </div>

            <!-- 第二列 -->
            <div class="contBox">
                <!-- 第二列第一排时钟 -->
                <div class="clockBox">
                    <div class="clock">
                        <div class="clock_min">
                            <!-- 刻度 -->
                            <div class="kedu top"></div>
                            <div class="kedu right"></div>
                            <div class="kedu bottom"></div>
                            <div class="kedu left"></div>
                            <!-- 圆心 -->
                            <div class="clock_yuanxin"></div>
                            <!-- 时分秒 -->
                            <div class="pointer hour"></div>
                            <div class="pointer min"></div>
                            <div class="pointer sec"></div>
                        </div>
                    </div>
                </div>
                <!-- 第二列第二排提示 -->
                <div class="tishi">
                    <div class="tishiBox">
                        <img src="./images/紫色立体ui_03.png" alt="">
                        <span>Neumorphic Design</span>
                        <div class="chahao">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
                <!-- 第二列第三排播放 -->
                <div class="playBox">
                    <div class="bolang_di"></div>
                    <div class="bolang_zhongjian"></div>
                    <div class="bolang_anniu">
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <!-- 第三列 -->
            <div class="rightBox">
                <!-- 第三列第一排tab -->
                <div class="tabBox">
                    <ul>
                        <input type="radio" name="chkR" id="chk1" checked>
                        <label for="chk1">
                            <li class="Tab1">Tab 1</li>
                        </label>
                        <input type="radio" name="chkR" id="chk2">
                        <label for="chk2">
                            <li class="Tab2">Tab 2</li>
                        </label>
                        <input type="radio" name="chkR" id="chk3">
                        <label for="chk3">
                            <li class="Tab3">Tab 3</li>
                        </label>
                        <div class="chkBox"></div>
                    </ul>
                </div>
                <!-- 第三列第二排搜索框 -->
                <div class="searchBox">
                    <input class="search" type="text" placeholder="Search...">
                    <img src="./images/location.png" alt="">
                </div>
                <!-- 第三列第三排文本框 -->
                <div class="textBox">
                    <input class="text" type="text" placeholder="Type anything...">
                </div>
                <!-- 第三列第四排宫格 -->
                <div class="gridBox">
                    <ul>
                        <li class="lefticon"></li>
                        <li class="conticon"></li>
                        <li class="righticon"></li>
                    </ul>
                </div>
                <!-- 第三列第五排滑块 -->
                <div class="sliderBox">
                    <div class="slider"></div>
                    <div class="slider_blue"></div>
                    <div class="slider_round"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>